<template>
  <div class="page-container">
    <front-header
      :calHeader="calHeader"
      :activeNav="calActiveNav"
      @toAnchor="toAnchor">
    </front-header>
    <div id="intro-0" class="intro-first">
      <div class="left">
        <div>
          <p class="header">类脑计算平台</p>
          <p class="content">依托于类脑云OS，构建高效的AI开发环境</p>
          <button @click="toLogin">免费体验</button>
        </div>
      </div>
      <div class="right">
        <img class="avatar" src="@/common/image/img-loadmain.png">
      </div>
    </div>
    <div class="intro-second">
      <div class="intro-second-content">
        <div class="left">
          <img class="avatar" src="@/common/image/img-jdyy.png">
        </div>
        <div class="right">
          <div>
            <p class="header">简单、易用、可靠</p>
            <div class="content">
              <p>支持GPU在线服务节点，云计算全面加速</p>
              <ul>
                <li class="content-item">
                  <div>{{gpuInfo.gpuTotal}}</div>
                  <div class="content-item-text">GPU总数</div>
                </li>
                <li class="content-item">
                  <div>{{gpuInfo.gpuUsingTotal}}</div>
                  <div class="content-item-text">正在使用GPU</div>
                </li>
                <li class="content-item">
                  <div>{{gpuInfo.nodeTotal}}</div>
                  <div class="content-item-text">计算节点数</div>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div id="intro-1" class="intro-third">
      <div class="title">依托类脑云OS <img src="@/common/image/icon-lnyos.png" alt="icon-lnyos"></div>
      <div class="item">
        <dl class="item-box">
          <dt class="item-img"><img src="@/common/image/icon-lnyos-f1.png" alt="icon-lnyos-f1"></dt>
          <dd class="item-text">
            <p>更直观交互页面</p>
            <ul>
              <li>web端提交任务，可视化显示资源利用率，web端查看任务日志</li>
            </ul>
          </dd>
        </dl>
        <dl class="item-box">
          <dt class="item-img"><img src="@/common/image/icon-lnyos-f2.png" alt="icon-lnyos-f2"></dt>
          <dd class="item-text">
            <p>分布式训练的支持</p>
            <ul>
              <li>便捷的分布式训练支持。一次作业提交中可包含多个子任务，可高效的进行跨机器的多任务训练</li>
            </ul>
          </dd>
        </dl>
        <dl class="item-box">
          <dt class="item-img"><img src="@/common/image/icon-lnyos-f3.png" alt="icon-lnyos-f3"></dt>
          <dd class="item-text">
            <p>免去运维压力</p>
            <ul>
              <li>灵活的计算资源配置，高可用的架构设计，可靠的容灾自动恢复</li>
            </ul>
          </dd>
        </dl>
      </div>
    </div>
    <div id="intro-2" class="intro-four">
      <div class="intro-four-content">
        <div class="title">
          <div class="title-left">
            <span class="title-bold">开箱可用的数据集</span>
            <span class="title-desc">
              <span>{{totalDataSet}}数据集</span>
              <span>0个数据类目</span>
            </span>
          </div>
          <div class="title-right">
            <a @click="toLogin">登录查看更多</a>
          </div>
        </div>
        <div class="content">
          <ul>
            <li v-for="(item, index) in dataSets" :key="index">
              <div class="item-title">{{item.name}}</div>
              <div class="item-content">{{item.profile}}</div>
              <div class="item-foot">
                <!-- <span class="item-foot-type">{{item.type}}</span> -->
                <span class="item-foot-times">{{item.userProjectCount}}次使用</span>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div id="intro-3" class="intro-five">
      <div class="intro-four-content">
        <div class="title">
          <div class="title-left">
            <span class="title-bold">精选的公开项目</span>
            <span class="title-desc">
              <span>{{totalProject}}个公开项目</span>
              <span>0个分类</span>
            </span>
          </div>
          <div class="title-right">
            <a @click="toLogin">登录查看更多</a>
          </div>
        </div>
        <div class="content">
          <ul>
            <li v-for="(item, index) in projects" :key="index">
              <div class="item-title">{{item.projectName}}</div>
              <div class="item-content">{{item.profile}}</div>
              <div class="item-foot">
                <!-- <span class="item-foot-type">{{item.type}}</span> -->
                <span class="item-foot-times">{{item.copyNumber}}次使用</span>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <front-footer class="page-footer"></front-footer>
  </div>
</template>

<script>
import axios from 'axios'
import Header from '@/components/header/front_header'
import Footer from '@/components/footer/footer'
import { getOpenProjectInfo } from '@/api/project'
import { getOpenDataSetInfo } from '@/api/dataset'
export default {
  components: {
    FrontHeader: Header,
    FrontFooter: Footer
  },
  data () {
    return {
      calHeader: false,
      calActiveNav: 0,
      gpuInfo: {
        'gpuTotal': 0,
        'gpuUsingTotal': 0,
        'nodeTotal': 0
      },
      dataSets: [],
      projects: [],
      totalProject: 0,
      totalDataSet: 0
    }
  },
  mounted () {
    window.addEventListener('scroll', this.handleScroll)
    this._getGpuInfo()
    this._getOpenProjectList()
    this._getOpenDataSetList()
  },
  methods: {
    // 处理滚动事件
    handleScroll () {
      const scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
      if (scrollTop > 68) {
        this.calHeader = true
      } else {
        this.calHeader = false
      }
      if (scrollTop < 400) {
        this.calActiveNav = 0
      } else if (scrollTop < 1000) {
        this.calActiveNav = 1
      } else if (scrollTop < 1638) {
        this.calActiveNav = 2
      } else {
        this.calActiveNav = 3
      }
    },
    // 页面内锚点跳转
    toAnchor (index) {
      let anchor = this.$el.querySelector(`#intro-${index}`)
      document.documentElement.scrollTop = anchor.offsetTop
    },
    // 跳转登录
    toLogin () {
      this.$router.push({ path: '/login' })
    },
    // 查询GPU信息
    _getGpuInfo () {
      let url = `/bitahub/article/gpu/getGpuInfo`
      axios({
        method: 'get',
        url: url
      }).then(res => {
        this.gpuInfo = res.data.result
      }).catch(error => {
        console.log('error', error)
      })
    },
    // 获取着陆页公开项目信息
    _getOpenProjectList () {
      let query = `?sortType=1&cp=1&ps=4`
      getOpenProjectInfo(query).then(res => {
        if (res.message.code === 0) {
          this.projects = res.data.list
          this.totalProject = res.data.total
        } else {
          this.$message({ message: res.message.message, showClose: true, type: 'error' })
        }
      })
    },
    // 获取着陆页公开数据集
    _getOpenDataSetList () {
      let query = `?cp=1&ps=6`
      getOpenDataSetInfo(query).then(res => {
        if (res.message.code === 0) {
          this.dataSets = res.data.list
          this.totalDataSet = res.data.total
        } else {
          this.$message({ message: res.message.message, showClose: true, type: 'error' })
        }
      })
    }
  }
}
</script>

<style lang="stylus">
.page-container
  display flex
  flex-direction column
  height auto
  .intro-first
    height 410px
    width 100%
    position relative
    max-width 1000px
    margin 0 auto
    padding 68px 0 30px 0
    .left
      height 100%
      width 50%
      display inline-flex
      align-items center
      justify-content left
      .header
        font-weight 600
        font-size 30px
        color #333333
        letter-spacing 0
        height 42px
        line-height 42px
        margin-bottom 12px
      .content
        font-size 18px
        color #555555
        letter-spacing 0
        height 25px
        line-height 25px
        margin-bottom 39px
      button
        color #ffffff
        background #1787FF
        border-radius 6px
        cursor pointer
        padding 10px 30px
        font-size 14px
        border none
        &:hover
          background #006BDD
    .right
      width 50%
      float right
      height 100%
      display flex
      align-items center
      justify-content flex-end
      .avatar
        width 70%
  .intro-second
    height 424px
    width 100%
    background #f7faff
    .intro-second-content
      height 100%
      width 100%
      position relative
      max-width 1000px
      margin 0 auto
      .left
        width 50%
        height 100%
        display inline-flex
        align-items center
        justify-content left
        .avatar
          width 70%
      .right
        float right
        width 50%
        height 100%
        display flex
        align-items center
        justify-content flex-end
        .header
          font-weight 600
          font-size 30px
          color #333
          letter-spacing 0
          height 42px
          line-height 42px
          margin-bottom 12px
          text-align right
        .content
          font-size 18px
          color #555
          letter-spacing 0
          height auto
          line-height 25px
          margin-bottom 39px
          text-align right
          >p
            margin-bottom 37px
          ul
            display flex
            justify-content space-between
            li
              display inline-block
              letter-spacing 0
            .content-item
              font-weight 600
              font-size 24px
              color #1787FF
              .content-item-text
                font-size 16px
                color #555555
                letter-spacing 0
  .intro-third
    height 530px
    width 100%
    position relative
    max-width 1000px
    margin 0 auto
    .title
      padding 61px
      display flex
      align-items center
      justify-content center
      font-weight 600
      font-size 30px
      color #333333
      img
        width 120px
        margin-left 20px
    .item
      display flex
      padding-bottom 71px
      .item-box
        width 33.3%
        text-align center
      .item-img
        height 112px
        display flex
        align-items center
        justify-content center
        img
          width 105px
      .item-text
        font-size 16px
        color #555555
        display inline-block
        text-align left
        width 80%
        p
          font-weight 600
          font-size 20px
          color #333
          padding 51px 0 20px
          text-align center
        ul>li
          font-size 16px
          color #555555
          line-height 1.5
  .intro-four, .intro-five
    height 639px
    width 100%
    background #f7faff
    .intro-four-content
      height 100%
      width 100%
      position relative
      max-width 1000px
      margin 0 auto
      background-image url('../../common/image/img-sjjbg.png')
      background-size 876.9px 380.6px
      background-repeat no-repeat
      background-position bottom
      .title
        padding 67px 0 41px
        .title-left
          display inline-block
          width 80%
          .title-bold
            font-weight 600
            font-size 30px
            color #333333
            margin-right 37px
          .title-desc
            font-size 18px
            color #555555
            letter-spacing 0
            >span
              padding-right 15px
        .title-right
          display inline-flex
          width 20%
          justify-content flex-end
          >a
            float right
            font-size 14px
            color #1787FF
            cursor pointer
            &:hover
              color #006BDD
      .content
        ul
          list-style none
          display flex
          flex-wrap wrap
          justify-content space-between
          li
            width 32%
            display inline-block
            margin-bottom 20px
            background #FFFFFF
            box-shadow 0 10px 20px 0 rgba(37,40,42,.05), 0 0 1px 0 rgba(37,40,42,.15)
            border-radius 6px
            padding 25px
            box-sizing border-box
            .item-title
              font-weight 600
              font-size 20px
              color #333333
            .item-content
              font-size 14px
              color #555555
              margin 18px 0
              min-height 70px
              line-height 1.8
              overflow hidden
              text-overflow ellipsis
              display -webkit-box
              /*! autoprefixer: off */
              -webkit-box-orient vertical
              /* autoprefixer: on */
              -webkit-line-clamp 3
            .item-foot
              font-size 14px
              color #999999
              letter-spacing 0
              .item-foot-type
                margin-right 28px
  .intro-five
    background #ffffff
    .intro-four-content
      background-image url('../../common/image/img-gkxmbg.png')
      background-position center
      background-size 613px 505px
      background-repeat no-repeat
      .content
        ul>li
          width 49%
  .page-footer
    >p
      background #f7faff!important
</style>
